<template>
  <uni-nav-bar title="我的" @clickLeft="back"/>
  <view class="content">
    <view class="content_image">
      <image src="../../static/image/background.jpg" mode="aspectFill"></image>
    </view>
    <!-- 内容 -->
    <view class="content_botton">
      <view class="content_info" v-if="userId!=0">
        <image :src="url" mode="" @click="uploadImage()"></image>
        <view class="username">
          {{ userName }}
        </view>
      </view>
      <view v-else class="noLogin">
        <image src="../../static/image/weixin.png" mode="widthFix" @click="toLogin()"></image>
        <!-- 点击图片登录修改为从接口获取的用户名数据 -->
        <view class="">未登录用户名</view>
      </view>
      <!--  -->
      <view class="my_order">
        <view class="my_order_title">
          个人相关
        </view>
        <view class="my_order_item" v-for="item in list1">
          <view class="my_order_content" @click="toOther(item.id)">
            <image :src="item.url" mode="widthFix"></image>
            <view class="">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <!-- 修改为我的订单 -->
      <!-- <view class="my_order">
        <view class="my_order_title">
          我的订单
        </view>
        <view class="my_order_item" v-for="item in list">
          <view class="my_order_content">
            <image :src="item.url" mode="widthFix"></image>
            <view class="">{{item.name}}</view>
          </view>
        </view>
      </view> -->
      <!--  -->
      <view class="other">
        <view class="other_address" @click="toAddress()">
          <view>我的地址</view>
          <image src="/static/image/address.png" mode="widthFix"></image>
        </view>
        <view class="other_address">
          <view>联系我们</view>
          <image src="/static/image/lianxi.png" mode="widthFix"></image>
        </view>
        <view class="other_address">
          <view>设置中心</view>
          <image src="/static/image/customize.png" mode="widthFix" @click="toSetting()"></image>
        </view>
      </view>
    </view>
  </view>

  <Footer></Footer>
</template>

<script>
import Footer from '../../component/footer/footer.vue'

export default {
  components: {
    Footer
  },
  data() {

    return {
      list: [{
        id: 1,
        url: "/static/image/all.png",
        name: "全部订单"
      },
        {
          url: "/static/image/pay.png",
          id: 2,
          name: "待付款"
        },
        {
          url: "/static/image/remark.png",
          id: 3,
          name: "待评价"
        },
        {
          url: "/static/image/tuikuan.png",
          id: 4,
          name: "退款 "
        },
      ],
      list1: [{
        id: 1,
        url: "/static/image/collection.png",
        name: "我的收藏"
      }, {
        id: 2,
        url: "/static/image/guanzhu.png",
        name: "关注店铺"
      }, {
        id: 3,
        url: "/static/image/zuji.png",
        name: "足迹"
      }, {
        id: 4,
        url: "/static/image/kabao.png",
        name: "零钱"
      },],
      url: '',
      userId: '',
      userName: '',
      collectNum: 0
    }
  },
  onShow() {
    this.userId = uni.getStorageSync('userId')
    this.url = uni.getStorageSync('userAvatar')
    this.userName = uni.getStorageSync('userName')
    let collect = uni.getStorageSync('collect')
    this.collectNum = collect.length;
  },
  methods: {
    // 添加地址
    addAdress() {
      uni.chooseAddress({
        success(res) {
          console.log(res)
          uni.setStorageSync("address", res);
        }
      })
    },
    uploadImage() {
      console.log("点击了上传头像")
      var that = this
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //album 从相册选图，camera 使用相机
        success: function (res) {
          console.log(res.tempFilePaths[0])
          uni.uploadFile({
            url: 'http://localhost:9999/nbb/User/updateAvatar',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': uni.getStorageSync('Authorization'),
              'enctype':'multipart/form-data'
            },
            name:'file',
            formData: {
              id: uni.getStorageSync('userId'),
            },
            success: (res) => {
              const obj = JSON.parse(res.data)
              console.log(obj.code)
              if (obj.code === 0) {
                uni.showToast({
                  title: "更新头像成功",
                  duration: 2000
                })
                //修改本地存储中的头像
                uni.request({
                  url: "http://localhost:9999/nbb/User/selectAvatar",
                  header: {
                    'Authorization': uni.getStorageSync('Authorization'),
                    'content-type': 'application/x-www-form-urlencoded'
                  },
                  method: 'GET',
                  data: {
                    id: uni.getStorageSync('userId')
                  },
                  success: (res) => {
                    if (res.data.code == 200) {
                     console.log(res.data.data)
                      uni.setStorageSync('userAvatar', res.data.data)
                      that.url = res.data.data
                      // that.$forceUpdate()
                    } else {
                      console.log("获取头像失败");
                      // console.log(res.data);
                    }
                  },
                })

              } else {
                console.log("更新头像失败");

              }
            }
          })
        }
      })
    },
    toOther(id) {
      if (id == 1) {
        uni.navigateTo({
          url: '/pages/user/collection'
        })
      } else if (id === 4) {
        uni.navigateTo({
          url: '/pages/user/SmallChange'
        })
      } else if (id === 3) {
        uni.navigateTo({
          url: '/pages/user/footPrints'
        })
      }

    },
    toSetting() {
      uni.navigateTo({
        url: '/pages/user/setting'
      })
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    toAddress() {
      uni.navigateTo({
        url: '/pages/user/address'
      })
    }
  }
}
</script>

<style lang="scss">
::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

page {
  background-color: #eee;
}

.content_image {
  image {
    // 高斯模糊
    filter: blur(3rpx);
    width: 100%;
  }

  height: 150rpx;
  position: relative;
}

.content_botton {
  .noLogin {
    position: absolute;
    left: 45%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 15%;
    margin-left: 5%;
    border-radius: 20rpx;
    width: 90%;
    height: 250rpx;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .content_info {
    position: relative;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 15%;
    margin-left: 5%;
    border-radius: 20rpx;
    width: 90%;
    height: 250rpx;
    background-color: #fff;

    image {
      margin-top: -40rpx;
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
    }

    .username {
    }

    .select {
      display: flex;
      justify-content: space-between;

      view {
        padding: 0 40rpx;
      }
    }
  }

  .my_order {
    width: 90%;
    margin-top: 90rpx;
    margin-left: 5%;
    height: 280rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .my_order_title {
      border-radius: 20rpx;
      padding-left: 20rpx;
      line-height: 80rpx;
      height: 80rpx;
    }

    .my_order_item {
      padding: 4.5%;
      float: left;

      .my_order_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
  }
}

.other {
  margin: 90rpx 40rpx;
  height: 280rpx;
  width: 90%;
  border-radius: 20rpx;
  background-color: #fff;

  .other_address {
    height: 50rpx;
    padding: 20rpx 20rpx;
    border-bottom: 1rpx dashed gainsboro;
    display: flex;
    justify-content: space-between;


    image {
      width: 50rpx;
    }
  }

  .other_our {
    height: 60rpx;
    padding: 20rpx 20rpx;
    display: flex;
    justify-content: space-between;

    image {
      width: 50rpx;
    }
  }
}
</style>